<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Triangle Solver</title>
<style>
  .triangle-container {
    width: 500px;
    height: 300px;
    position: relative;
    margin: 20px auto;
    display: flex;
    justify-content: space-around;
  }
  .triangle {
    width: 0;
    height: 0;
    border-left: 200px solid transparent;
    border-bottom: 200px solid black;
    position: absolute;
    cursor: move;
  }
  .triangle-30-60-90 {
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    border-left: 300px solid transparent;
    border-bottom: 200px solid black;
    position: absolute;
    cursor: move;
  }
  .triangle-45-45-90 {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 0;
    height: 0;
    border-left: 200px solid transparent;
    border-bottom: 200px solid black;
    position: absolute;
    cursor: move;
  }
  .angle {
    position: absolute;
    font-size: 16px;
    color: red;
  }
  #controls {
    margin-top: 20px;
    text-align: center;
  }
</style>
</head>
<body>
<div class="triangle-container">
  <div class="triangle triangle-30-60-90" id="triangle1"></div>
  <div class="angle" id="angle1">30°</div>
  <div class="angle" id="angle2">60°</div>
  <div class="angle" id="angle3">90°</div>
</div>
<div class="triangle-container">
  <div class="triangle triangle-45-45-90" id="triangle2"></div>
  <div class="angle" id="angle4">45°</div>
  <div class="angle" id="angle5">45°</div>
  <div class="angle" id="angle6">90°</div>
</div>
<div id="controls">
  <button onclick="showAngles()">检验</button>
</div>

<script>
  // Function to show angles
  function showAngles() {
    const triangle1 = document.getElementById('triangle1');
    const triangle2 = document.getElementById('triangle2');

    const angle1 = Math.round(getAngle(triangle1.style.transform) % 360);
    const angle2 = (angle1 + 90) % 360;
    const angle3 = (angle1 + 180) % 360;

    const angle4 = Math.round(getAngle(triangle2.style.transform) % 360);
    const angle5 = angle4;
    const angle6 = 90;

    document.getElementById('angle1').innerText = `${angle1}°`;
    document.getElementById('angle2').innerText = `${angle2}°`;
    document.getElementById('angle3').innerText = `${angle3}°`;

    document.getElementById('angle4').innerText = `${angle4}°`;
    document.getElementById('angle5').innerText = `${angle5}°`;
    document.getElementById('angle6').innerText = `${angle6}°`;
  }

  // Helper function to get rotation angle
  function getAngle(rotationString) {
    if (!rotationString) return 0;
    const match = rotationString.match(/rotate\((\d+)deg\)/);
    return match ? parseInt(match[1]) : 0;
  }

  // Drag and drop functionality
  function enableDragAndDrop(element) {
    let offsetX, offsetY;
    let isDragging = false;

    element.addEventListener('mousedown', startDragging);
    document.addEventListener('mousemove', dragTriangle);
    document.addEventListener('mouseup', stopDragging);

    function startDragging(event) {
      isDragging = true;
      offsetX = event.clientX - element.getBoundingClientRect().left;
      offsetY = event.clientY - element.getBoundingClientRect().top;
    }

    function dragTriangle(event) {
      if (isDragging) {
        const x = event.clientX - offsetX;
        const y = event.clientY - offsetY;
        element.style.left = x + 'px';
        element.style.top = y + 'px';
      }
    }

    function stopDragging() {
      isDragging = false;
    }
  }

  // Enable drag and drop for triangles
  enableDragAndDrop(document.getElementById('triangle1'));
  enableDragAndDrop(document.getElementById('triangle2'));
</script>
</body>
</html>
